<template>
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer" label-width="100px"
                 :label-position="labelPosition">
            <el-form-item prop="username" label="账号：">
                <el-input v-model="loginForm.username" type="text" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="code" label="验证码：">
                <el-input type="text" v-model="loginForm.code" placeholder="点击图片更换验证码" v-enter="fnLogin"
                          class="captcha"/>
                <img :src="'data:image/png;base64,'+captchaUrl" @click="fnUpdateCaptcha" class="captchaImg"
                     style="float: right;width: 82px"/>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="text" @click="changeForget"
                           style="float: right;padding: 10px 10px;font-size: 14px">
                    忘记密码
                </el-button>
                <el-checkbox v-loading="loadingCheckbox" v-model="checked" style="margin-bottom: 10px;text-align: left;float: right">记住我
                </el-checkbox>
            </el-form-item>
            <el-button type="primary" style="width: 30%;margin: auto;display: block" @click="fnLogin">登录</el-button>
        </el-form>
        <!--        <div v-else>-->
        <!--            <forget-password></forget-password>-->
        <!--        </div>-->
    </div>
</template>

<script>
import {v4}  from 'uuid' // npm install -S uuid
export default {
    name: "LoginChild",
    data() {
        return {
            api: this.$store.getters.app.api,
            //表单表头对其方向
            labelPosition: 'left',
            //文件上传路径
            captchaUrl: '',
            //复选框
            checked: true,
            //登录数据
            loginForm: {
                username: '',
                password: '',
                code: '', // 验证码
                //验证码key
                codeUuid: v4(),
            },
            //验证码加载
            loadingCheckbox: false,
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            }
        }
    },
    //自定义指令
    directives: {
        enter: {
            bind(el, binding) {
                el.addEventListener('keyup', (event) => {
                    if (event.keyCode === 13) {
                        binding.value();
                    }
                });
            },
        },
    },
    async mounted() {
        await this.fnUpdateCaptcha();
    },
    computed: {},
    methods: {
        //登录
        async fnLogin() {
            await this.$refs.loginForm.validate(async (status) => {
                if (status) {
                    let res = await this.api.user.login(this.loginForm);
                    if (res.code == 200) {
                        const tokenStr = res.data.token.access_token
                        // // 存储token
                        this.api.auth.setToken(tokenStr)
                        this.api.auth.setUserInfo(res.data.user)
                        this.$store.commit("app/setUserInfo", res.data.user)
                        // // 跳转首页
                        let path = this.$route.query.redirect
                        this.$router.replace('/home')
                    } else {
                        this.fnUpdateCaptcha()
                    }
                }
            })
        },
        //获取验证码
        async fnUpdateCaptcha() {
            this.loadingCheckbox = true;
            let resCaptcha = await this.api.user.captcha({uuid:this.loginForm.codeUuid});
            this.captchaUrl = resCaptcha.message;
            this.loadingCheckbox = false;
        },
        //打开 忘记密码
        changeForget() {
            this.$emit("openForget", true)
        },
    }
}
</script>

<style scoped>

.loginTitle[data-v-dd7a443a] {
    /*margin: 0 auto 20px auto;*/
    text-align: center;
}

.captcha {
    width: auto;
    margin-right: 10px;
}

.captchaImg {
    width: 100px;
}

.el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
